<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<input type="button" @click="change" value="改变msg" />
			<h3 id="h3">{{msg}}</h3>
		</div>
	</body>
	<script>
	/*
	 * 生命周期函数=生命周期钩子=生命周期事件
	 * 创建阶段的生命周期函数:
	 * 		beforeCreate,created,beforeMount ,mounted
	 */
		var vue=new Vue({
			el:"#app",
			data:{
				msg:"ok"
			},
			methods:{
				show(){
					console.log("show方法被调用");
				},
				change(){
					this.msg="No";
				}
			},
			beforeCreate(){
				//这是第一个生命周期函数，表示实例完全被创建出来之前，会执行它
				//console.log(this.msg);
				//this.show();
				//注意:在beforeCreate生命周期函数执行时,data和method中的数据都还未被初始化
			},
			created(){//这是遇到的第二个生命周期函数
				//console.log(this.msg);
				//this.show();
				//在created中 ，data 和methods 都被初始化
				//如果要调用methods中的方法，或者操作data中的数据
				//最早只能在created 方法中操作
			},
			beforeMount(){//这是遇到的第三个生命周期函数，表示模板已经在
				//内存中编辑完成,但尚未把模板渲染到页面中
				//console.log(document.getElementById('h3').innerText);
				//在beforeMount执行时，页面中的元素,还没有被真正替换
				//过来，只是之前真正写的一些模板字符串
			},
			mounted(){
				/*
				 * 这是第4个生命周期函数，表示:内存中的模板,已经真实的挂载到
				 * 了页面中，用户已经可以看到渲染好的页面了
				 */
				//console.log(document.getElementById('h3').innerText);
				//注意:mounted 是 实例创建期间的最后一个生命周期函数,当执行完
				//mounted就表示,实例已经被完全创建好了，此时，如果没有其他操作，
				//这个实例，就躺在内存中，一动不动
			},
			/**
			 * 接下来是运行中的两个事件:
			 * 		beforeUpdate:
			 * 		update:
			 * 		触发条件：实例data改变时，执行0~多次
			 */
			beforeUpdate(){
				//执行该方法时，data数据发生改变,但页面还没有更新
				console.log('界面上元素的内容:'+document.getElementById('h3').innerText);
				console.log('data 中的msg数据时:'+this.msg);
				//得出结论:beforeUpdate执行时，页面中显示的数据，还是旧的，此时data数据时最新的，页面
				//		页面尚未和最新的数据保持同步
			},
			update(){
				//执行时间:页面和data的数据已经保持同步,是最新数据时执行
				console.log('界面上元素的内容:'+document.getElementById('h3').innerText);
				console.log('data 中的msg数据时:'+this.msg);
			},
			/**
			 * vue实例销毁时的生命周期函数:
			 * 		beforeDestroy：
			 * 		destroy:
			 */
			beforeDestroy(){
				/**
				 * 当执行该钩子函数时，vue实例已经从运行阶段进入到销毁阶段，
				 * 此时:实例身上所有的data，methods等还处于可用状态,
				 * 		还未真正执行销毁
				 */
			},
			destroy(){
				/**
				 * 该钩子函数被执行时，组件已经被完全销毁，组件中所有data，method都将不可用
				 */
			}
		});
	</script>
</html>